import {Component, Hook, Mut, VueComponent, ComponentProps} from 'vue3-oop'
import {NButton, NSpace, NTag, NImage, PaginationProps} from 'naive-ui'
import styles from './index.module.scss'

import ProinstApi from './ProcessInstApi'
import DynaTablePanel from "@/components/panel/DynaTablePanel2";

interface IProps {
  maxWidth?:number,
  maxHeight?:number
}
@Component()
export default class Index extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    maxWidth:{default:800},
    maxHeight:{default:600}
  }

  constructor() {
    super()
  }

  @Mut() state = {
    columns: [
      {
        key: "id",
        title: "ID"
      },{
        key: "name",
        title: "流程实例名称"
      },{
        key: "processDefinitionName",
        title: "流程定义名称"
      },{
        key: "businessKey",
        title: "业务数据KEY"
      },{
        key: "startUserId",
        title: "启动用户ID"
      },{
        key: "startTime",
        title: "启动时间"
      },{
        key: "tenantId",
        title: "租户ID"
      },{
        key: "suspended",
        title: "挂起状态",
        render: (row:any)=>(row['suspended']===true?"是":"否")
      },
      // {
      //   key: "isDeleted",
      //   title: "已删除",
      //   render: (row:any)=>(row['isDeleted']===true?"是":"否")
      // },
      {
        key: "SYS_ROW_ACTIONS",
        title: "操作",
        render: (row:any)=>(<NSpace size="small">
          <NButton onClick={()=>{this.handleShowImage(row);}}>流程图</NButton>
          {!row['suspended']&&<NButton onClick={()=>{this.suspendProcessInst(row);}}>挂起</NButton>}
          {row['suspended']&&<NButton onClick={()=>{this.activateProcessInst(row);}}>激活</NButton>}
        </NSpace>)
      }
    ] as any[],
    records: [] as any[],
  }

  private rowKey=(row:any)=>row.id;

  @Mut() pagination = {
    showSizePicker: true,
    pageSizes: [10,20,50,100],
    pageSize: 10,
    page: 1,
    itemCount: 0,
    showQuickJumper: true,
    onUpdatePage: (page:number) => {// 切换页
      this.pagination.page = page;
      this.triggerSearch();
    },
    onUpdatePageSize: (size:number) => {// 切换页大小
      this.pagination.pageSize = size;
      this.pagination.page = 1;
      this.triggerSearch();
    },
    prefix: ()=>(
      <NSpace>
        <NTag >总共 {this.pagination.itemCount} 项</NTag>
      </NSpace>
    )
  } as PaginationProps;


  // 快速搜索
  private handleQuickSearch=(value:string)=>{
    console.log("handleQuickSearch",value);
    this.triggerSearch();
  }

  // 触发查询
  private triggerSearch=()=>{
    ProinstApi.page({
      params:{},
      page:{size:this.pagination.pageSize,current:this.pagination.page}
    }).then(({data})=>{
      const { page,record } = data;
      this.pagination.itemCount = page.total;
      this.state.records = record;
    })
  }

  // 查看流程图
  private handleShowImage=(row:any)=>{
    ProinstApi.getImage(row.id).then((response)=>{
      if(200===response.status){
        const url = URL.createObjectURL(response.data)
        window.$dialog.success({
          showIcon: false, closable: false,
          style:{width:"unset"},
          content:()=>(<NImage alt={"流程图"} src={`${url}`} />)
        })
      }
    }).catch(()=>{
      window.$message.warning("打开流程图失败")
    })
  }

  /**
   * 流程定义挂起
   */
  private suspendProcessInst=(row:any)=>{
    window.$dialog.warning({
      title: "请注意！",
      content: `是否挂起流程实例“${row.name}”？`,
      positiveText: "确定",
      onPositiveClick: ()=>{
        ProinstApi.suspend({processInstanceId:row.processInstanceId}).then(({data})=>{
          if(data.success){
            window.$message.success("流程实例挂起成功")
          }
          this.triggerSearch();
        })
      },
      negativeText:"取消",
      onNegativeClick: ()=>{}
    })
  }

  /**
   * 流程定义激活
   */
  private activateProcessInst=(row:any)=>{
    window.$dialog.warning({
      title: "请注意！",
      content: `是否激活流程实例“${row.name}”？`,
      positiveText: "确定",
      onPositiveClick: ()=>{
        ProinstApi.activate({processInstanceId:row.processInstanceId}).then(({data})=>{
          if(data.success){
            window.$message.success("流程实例激活成功")
          }
          this.triggerSearch();
        })
      },
      negativeText:"取消",
      onNegativeClick: ()=>{}
    })
  }

  @Hook('Mounted')
  onMounted(){
    this.triggerSearch();
  }

  render() {

    return (
      <DynaTablePanel
        class={[styles.processinst_list_view]}
        icon={"Flow16Filled"}
        title={"流程实例"}
        showQuickSearch={true}
        showSeniorSearch={true}
        onQuickSearch={this.handleQuickSearch}
        nDataTableProps={{
          rowKey:this.rowKey,
          columns:this.state.columns,
          data:this.state.records,
          pagination:this.pagination,
          maxHeight:this.props.maxHeight as number - 155
        }}
        toolbarActions={[]}
      />
    )
  }
}
